@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .sidebar-item {
    @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
  }
  .sidebar-item.active {
    @apply bg-primary/10 text-primary font-medium;
  }
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
  }
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
  }
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90;
  }
  .btn-secondary {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
  }
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
  }
  .badge {
    @apply px-2 py-1 text-xs rounded-full font-medium;
  }
}
